Learning Topic 5: Web Graphics -- Tools, Formats, and Optimization Background/Rationale The way a website looks makes a big difference in the reception of information by the visitor. Graphics can offer deeper understanding of the web page content. There are a variety of tools that make image preparation for the screen easier. It’s important to understand which image formats will work in a website and how to save images to small file size required for fast web download without degrading image quality. At the end of this Learning Topic, you will have deeper understanding of the uses and preparation of web graphics. 1. Visual Literacy Visual literacy includes the ability to make meaning from graphic images.. Visual literacy is based on the idea that pictures can be “read” and that meaning can be communicated through a process of reading. Visual literacy is an often-overlooked type of literacy and a critical component of 21st-century communication. Think about how much information comes to you via a screen and the amount of information that can be derived from an image. 2. Studies of Image Communication Well-created graphics can increase the potential to reach your audience by 43 percent. Research at the 3M Corporation concluded that we process visuals 60,000 times faster than text. This is a huge fact that is often overlooked and deserves consideration in creating learning environments. As you can see, good graphics are critical to your web communication no matter what the purpose. Graphics additionally meet the needs of nonlinguistic learners, media producers, and visual learners. Images are becoming a more collaborative form of information. It is unwise to underestimate the importance and value of images in meeting your web-based teaching and learning. 3. Using Graphics on Your Website This learning topic explores using graphics to enhance your website. Graphics that support your message are a critical addition to website development. Images are what draw your visitors’ attention and invite them to stay at a site and investigate further. Quality images promote professionalism and the credibility of your site. Think about using graphics to draw the audience to the most important elements of a page. Images should balance and enhance the text and add decoration that supports the voice of the site. Images should extend the communication, description, and understanding of the text presented. There are several ways to approach creating images for your website. As with web creation software, there are both desktop and webware options. 4. Types of Graphic Creation Software Desktop applications like Photoshop are standards for professional design use. These tools serve design professionals as well as students learning design skills. Free, open source tools like Gimp and Gimpshop also offer similar strong capabilities to designers. 5. Webware Graphic Tools Emerging webware tools like fotoflexr (http://fotoflexr.com
) and picnik (http://www.picnik.com ), among many others, offer a cloud computing alternative with robust tools, filters, fonts, and layers. 6. Best Tools for Different Situations Your choice of tools will reflect your personal learning goals. If you intend to become proficient in graphic design or teach it, the Photoshop/Gimp choices are for you. If you just want to alter some images or create some basic graphics, a web-based tool that downloads an image back to your desktop as a .jpg (webware) will be your answer. Choose the graphic tool to suit your needs. 7. Current Web Graphic Trends A few tips on web graphics: · Background images are seldom used these days; they are dated and can cause noise (distraction) to your communication. · Animated .gifs are small animations that can scream amateur. Cute is not a good communication tool. Use animated .gifs only if you are showing a process that has a before and after that helps the visitors to understand a concept. · Clip art is also out of favor and is being replaced by photo images, which are more information rich. · It is often hard to design graphics without text to around which to build them. If your text is not complete, use Latin filler text as placeholders for your text so you can envision how images will look on your page. This designer’s toolbox website will generate this filler text to use on your page until you can replace it with your own text. http://www.designerstoolbox.com/designresources/greek/?PHPSESSID=015f46384a977e1aabda4f403efad646 · Images should suit your intended audience and follow the voice and color scheme determined for your site. · Image output is also an important factor. Not everyone has high-speed data access, and being considerate of your potential visitors from less developed areas of the world means getting your graphics to the smallest size possible without degrading visual quality. Research best practices in image exporting and optimization, and apply your new knowledge to your images. · Identify the concepts of visual literacy as they relate to education and communication. (Discussion 1) Learner Outcomes: At the end of this Learning Topic, you will be able to: · Identify open source desktop and web-based graphic applications and identify the most appropriate situations in which to use each. (Project 1) · Create an organizer of key graphic tools found in several graphic applications, the tool’s purpose and application. (Discussion 2) · Demonstrate understanding of image software tools by creating a series of images and graphics for use on an ePortfolio website and explaining the steps in the creation process and reason for the chosen optimization scheme. (Project 2) Readings and Research: Galer, Mark, and Les Horvat. "Chapter 10 - Digital Manipulation." Digital Imaging. Focal Press. 2001. Books24x7. NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section. Parkinson, Mike. "The Power of Visual Communication." Business Graphics - Billion Dollar Business Graphics. N.p., n.d. Web. 23 Nov. 2009. http://www.billiondollargraphics.com/infographics.html . Smith, Bud, and Peter Frazier. Creating Web Graphics For Dummies. John Wiley & Sons. 2003. Books24x7. "Google Image Swirl: notre dame." Google Image Swirl. N.p., n.d. Web. 23 Nov. 2009. http://image-swirl.googlelabs.com/html?query=notre%20dame760 Supplemental: To learn more on visual design, scan these articles: Hashimoto, Alan. "Introduction." Visual Design Fundamentals: A Digital Approach. Cengage Charles River Media. 2004. Books24x7. There are several books on Photoshop, Gimp, and other image editing software in the Regis Library - Books24x7. Search for graphic design and multimedia, then search for image editing to support you in the tool you choose to explore. Online tutorials are abundant depending on the tool you choose, whether web or desktop based. Search for tutorials and how-to videos. Software graphic editors: · http://adobe.com/products/photoshop/ try for free 30 days · http://adobe.com/us/photoshopelements/ try for free 30 days · http://www.gimp.org/ (GNU Image Manipulation Program)– free open-source · http://www.gimpshop.com/ modification of gimp – free open-source Webware graphic editors: · Alilg Alilg.com · Aviary http://aviary.com/ Phoenix is the image editor in this suite · Cinepaint www.cinepaint.org/.webloc · DrPic http://www.drpic.com/ · FlauntR http://www.flauntr.com/ · FotoFlexer http://fotoflexer.com/ · Phixr http://www.phixr.com/ · Photoshop.com · Picassa http://picasa.google.com/ · Pixlr http://pixlr.com/ · Picnik http://www.picnik.com/ · Splashup http://www.splashup.com/ · Webresizer http://webresizer.com/ Learning Activities Activity 1: Discussion – Tool Comparison Project 1 - Comparison of graphic tool types Compare and contrast desktop image manipulation software to webware graphic software. Step 1: Download a trial or find a copy of Adobe Photoshop or Photoshop Elements you can use to demo, or use open source tools such as Gimp or Gimpshop. Also, visit a webware image editor (list provided under Readings and Research). http://Fotoflexer.com and http://www.picnik.com are good choices. Step 2: Watch or take an introductory tutorial for each tool. Create a chart comparing the strengths of each software you review. In a third column, point out where this tool might be best used, for what age group, used for what type of project possibilities, subject and/or context. Tool Comparison Table-Sample is provided for you, or you may create your own. Assessment See the Tool Comparison Checklist for evaluation criteria. Activity 2: Discussion 1 - Visual Literacy Step 1: To prepare for this discussion, research the term “visual literacy.” Step 2: Post your two to three sources to the Discussion Forum for this activity. Also, address the following in your response. · Share your working explanation of visual literacy as it applies to your preferred area and grade level of teaching. · What example can you share of learning that was enhanced by visual elements and a time when learning was not assisted by quality visuals and suffered for this lack? · What ideas do you have to enhance understanding and conceptualization of information by adding information-rich images to your website? Step 3: Read and respond to two or more of your colleagues’ postings. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated. Activity 3: Discussion - Graphics Creation Project 2 - Create Your Own Graphics Step 1: Determine which type of website graphic tool you will use based on your research in Project 1 and your personal learning goals. Use the course reading and tutorials from the Internet to develop a basic understanding of each graphic skill listed below. Step 2: Complete a full set of notes on each topic as you learn and experiment with these areas: -Graphic formats, .gif, .jpg and .png, and the difference between Red, Green, Blue (RGB) and Cyan, Magenta, Yellow, Black (CMYK); (you will be using RGB for all web graphics) -Image fixing: crop, resize, rotate, flip, rulers, units, pixels -Adjusting colors, contrast, levels, colorize, brightness -Graphic tools: select, rectangle, oval, lasso, magic wand, clone, stamp, burn, dodge, pen -Filters and effects: sharpen, smooth, distortions, various filters -Decoration and text, fills, gradients, color grabber, borders -Tools: paintbrush, pencil, line, sharpen, smooth -Uses of layers, opacity, and reasoning of foreground/background colors -Image output and optimization Step 3: After you feel more confident with the terms and tool uses, begin to use your image editor to create eight images for your website -- four photographic and four others: text, chart, illustration, timeline. For four of the images, create a dialogue of the steps taken when processing your image, and state your reasoning for each step. Also state what you wanted to create, how well it worked, what you are learning about graphic tools, and discuss saving or exporting your graphics for web use along the way. Step 4: Post your four images and dialogue to the Discussion Forum for this activity. Read and respond to two or more of your colleagues’ postings. Assessment See the Graphic Creations Checklist for evaluation criteria. Activity 4: Discussion 2 - Graphic Tools, Resources, and Uses Share four images and associated dialogue from Project 2 with your peers in the discussion board. Work to discover similar understandings. Support each other in challenging areas in order to develop a deeper understanding of the capacity of your tools as you evaluate each other’s graphics and choices you make in their creation. Evaluate and provide constructive feedback for your colleagues about their images. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Background/Rationale
The way a website looks makes a big difference in the reception of information by the visitor. Graphics can offer deeper understanding of the web page content. There are a variety of tools that make image preparation for the screen easier. It’s important to understand which image formats will work in a website and how to save images to small file size required for fast web download without degrading image quality. At the end of this Learning Topic, you will have deeper understanding of the uses and preparation of web graphics.
1. Visual Literacy
Visual literacy includes the ability to make meaning from graphic images.. Visual literacy is based on the idea that pictures can be “read” and that meaning can be communicated through a process of reading. Visual literacy is an often-overlooked type of literacy and a critical component of 21st-century communication. Think about how much information comes to you via a screen and the amount of information that can be derived from an image.
2. Studies of Image Communication
Well-created graphics can increase the potential to reach your audience by 43 percent. Research at the 3M Corporation concluded that we process visuals 60,000 times faster than text. This is a huge fact that is often overlooked and deserves consideration in creating learning environments. As you can see, good graphics are critical to your web communication no matter what the purpose. Graphics additionally meet the needs of nonlinguistic learners, media producers, and visual learners. Images are becoming a more collaborative form of information. It is unwise to underestimate the importance and value of images in meeting your web-based teaching and learning.
3. Using Graphics on Your Website
This learning topic explores using graphics to enhance your website. Graphics that support your message are a critical addition to website development. Images are what draw your visitors’ attention and invite them to stay at a site and investigate further. Quality images promote professionalism and the credibility of your site. Think about using graphics to draw the audience to the most important elements of a page. Images should balance and enhance the text and add decoration that supports the voice of the site. Images should extend the communication, description, and understanding of the text presented.
There are several ways to approach creating images for your website. As with web creation software, there are both desktop and webware options.
4. Types of Graphic Creation Software
Desktop applications like Photoshop are standards for professional design use. These tools serve design professionals as well as students learning design skills. Free, open source tools like Gimp and Gimpshop also offer similar strong capabilities to designers.
5. Webware Graphic Tools
Emerging webware tools like fotoflexr (http://fotoflexr.com
) and picnik (http://www.picnik.com
), among many others, offer a cloud computing alternative with robust tools, filters, fonts, and layers.
6. Best Tools for Different Situations
Your choice of tools will reflect your personal learning goals. If you intend to become proficient in graphic design or teach it, the Photoshop/Gimp choices are for you. If you just want to alter some images or create some basic graphics, a web-based tool that downloads an image back to your desktop as a .jpg (webware) will be your answer. Choose the graphic tool to suit your needs.
7. Current Web Graphic Trends
A few tips on web graphics:
· Background images are seldom used these days; they are dated and can cause noise (distraction) to your communication.
· Animated .gifs are small animations that can scream amateur. Cute is not a good communication tool. Use animated .gifs only if you are showing a process that has a before and after that helps the visitors to understand a concept.
· Clip art is also out of favor and is being replaced by photo images, which are more information rich.
· It is often hard to design graphics without text to around which to build them. If your text is not complete, use Latin filler text as placeholders for your text so you can envision how images will look on your page. This designer’s toolbox website will generate this filler text to use on your page until you can replace it with your own text. http://www.designerstoolbox.com/designresources/greek/?PHPSESSID=015f46384a977e1aabda4f403efad646
· Images should suit your intended audience and follow the voice and color scheme determined for your site.
· Image output is also an important factor. Not everyone has high-speed data access, and being considerate of your potential visitors from less developed areas of the world means getting your graphics to the smallest size possible without degrading visual quality. Research best practices in image exporting and optimization, and apply your new knowledge to your images.
· Identify the concepts of visual literacy as they relate to education and communication. (Discussion 1)
Learner Outcomes:
At the end of this Learning Topic, you will be able to:
· Identify open source desktop and web-based graphic applications and identify the most appropriate situations in which to use each. (Project 1)
· Create an organizer of key graphic tools found in several graphic applications, the tool’s purpose and application. (Discussion 2)
· Demonstrate understanding of image software tools by creating a series of images and graphics for use on an ePortfolio website and explaining the steps in the creation process and reason for the chosen optimization scheme. (Project 2)
Readings and Research:
Galer, Mark, and Les Horvat. "Chapter 10 - Digital Manipulation." Digital Imaging. Focal Press. 2001. Books24x7.
NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section.
Parkinson, Mike. "The Power of Visual Communication." Business Graphics - Billion Dollar Business Graphics. N.p., n.d. Web. 23 Nov. 2009. http://www.billiondollargraphics.com/infographics.html
.
Smith, Bud, and Peter Frazier. Creating Web Graphics For Dummies. John Wiley & Sons. 2003. Books24x7.
"Google Image Swirl: notre dame." Google Image Swirl. N.p., n.d. Web. 23 Nov. 2009. http://image-swirl.googlelabs.com/html?query=notre%20dame760
Supplemental:
To learn more on visual design, scan these articles:
Hashimoto, Alan. "Introduction." Visual Design Fundamentals: A Digital Approach. Cengage Charles River Media. 2004. Books24x7.
There are several books on Photoshop, Gimp, and other image editing software in the Regis Library - Books24x7. Search for graphic design and multimedia, then search for image editing to support you in the tool you choose to explore.
Online tutorials are abundant depending on the tool you choose, whether web or desktop based. Search for tutorials and how-to videos.
Software graphic editors:
· http://adobe.com/products/photoshop/
try for free 30 days
· http://adobe.com/us/photoshopelements/
try for free 30 days
· http://www.gimp.org/
(GNU Image Manipulation Program)– free open-source
· http://www.gimpshop.com/
modification of gimp – free open-source
Webware graphic editors:
· Alilg Alilg.com
· Aviary http://aviary.com/
Phoenix is the image editor in this suite
· Cinepaint www.cinepaint.org/.webloc
· DrPic http://www.drpic.com/
· FlauntR http://www.flauntr.com/
· FotoFlexer http://fotoflexer.com/
· Phixr http://www.phixr.com/
· Photoshop.com
· Picassa http://picasa.google.com/
· Pixlr http://pixlr.com/
· Picnik http://www.picnik.com/
· Splashup http://www.splashup.com/
· Webresizer http://webresizer.com/
Learning Activities
Activity 1: Discussion – Tool Comparison
Project 1 - Comparison of graphic tool types
Compare and contrast desktop image manipulation software to webware graphic software.
Step 1: Download a trial or find a copy of Adobe Photoshop or Photoshop Elements you can use to demo, or use open source tools such as Gimp or Gimpshop. Also, visit a webware image editor (list provided under Readings and Research). http://Fotoflexer.com
and http://www.picnik.com
are good choices.
Step 2: Watch or take an introductory tutorial for each tool. Create a chart comparing the strengths of each software you review. In a third column, point out where this tool might be best used, for what age group, used for what type of project possibilities, subject and/or context.
Tool Comparison Table-Sample is provided for you, or you may create your own.
Assessment
See the Tool Comparison Checklist for evaluation criteria.
Activity 2: Discussion 1 - Visual Literacy
Step 1: To prepare for this discussion, research the term “visual literacy.”
Step 2: Post your two to three sources to the Discussion Forum for this activity. Also, address the following in your response.
· Share your working explanation of visual literacy as it applies to your preferred area and grade level of teaching.
· What example can you share of learning that was enhanced by visual elements and a time when learning was not assisted by quality visuals and suffered for this lack?
· What ideas do you have to enhance understanding and conceptualization of information by adding information-rich images to your website?
Step 3: Read and respond to two or more of your colleagues’ postings.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Activity 3: Discussion - Graphics Creation
Project 2 - Create Your Own Graphics
Step 1: Determine which type of website graphic tool you will use based on your research in Project 1 and your personal learning goals. Use the course reading and tutorials from the Internet to develop a basic understanding of each graphic skill listed below.
Step 2: Complete a full set of notes on each topic as you learn and experiment with these areas:
-Graphic formats, .gif, .jpg and .png, and the difference between Red, Green, Blue (RGB) and Cyan, Magenta, Yellow, Black (CMYK); (you will be using RGB for all web graphics)
-Image fixing: crop, resize, rotate, flip, rulers, units, pixels
-Adjusting colors, contrast, levels, colorize, brightness
-Graphic tools: select, rectangle, oval, lasso, magic wand, clone, stamp, burn, dodge, pen
-Filters and effects: sharpen, smooth, distortions, various filters
-Decoration and text, fills, gradients, color grabber, borders
-Tools: paintbrush, pencil, line, sharpen, smooth
-Uses of layers, opacity, and reasoning of foreground/background colors
-Image output and optimization
Step 3: After you feel more confident with the terms and tool uses, begin to use your image editor to create eight images for your website -- four photographic and four others: text, chart, illustration, timeline.
For four of the images, create a dialogue of the steps taken when processing your image, and state your reasoning for each step. Also state what you wanted to create, how well it worked, what you are learning about graphic tools, and discuss saving or exporting your graphics for web use along the way.
Step 4: Post your four images and dialogue to the Discussion Forum for this activity. Read and respond to two or more of your colleagues’ postings.
Assessment
See the Graphic Creations Checklist for evaluation criteria.
Activity 4: Discussion 2 - Graphic Tools, Resources, and Uses
Share four images and associated dialogue from Project 2 with your peers in the discussion board. Work to discover similar understandings. Support each other in challenging areas in order to develop a deeper understanding of the capacity of your tools as you evaluate each other’s graphics and choices you make in their creation. Evaluate and provide constructive feedback for your colleagues about their images.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.